<template>
	<div id="addHouse">
		<!-- <transition name="moveL"> -->
		<houseBasicInfo @click="handlePopup" v-show="$route.query.page == 'basic'" />
		<!-- </transition> -->
		<!-- <transition name="moveL">
			<houseSpecialInfo v-show="$route.query.page == 'special'" />
		</transition> -->
		<transition name="moveR">
			<searchHouse v-show="$route.query.page == 'search'" />
		</transition>
		<van-popup v-model="showPicker" position="bottom">
			<inputList :list="selectField"
			:id="selected.id"
			@hidePopup="hidePopup" />
			<van-picker v-if="selected.isPicker"
				:columns="selected.columns()"
				@cancel="showPicker = false"
				@change="popupChange"
			/>
		</van-popup>
	</div>
</template>

<script>

import houseBasicInfo from './houseBasicInfo.vue'
import searchHouse from './searchHouse.vue'
import inputList from './inputList.vue'
import cloneDeep from 'lodash/cloneDeep'

export default {
	data() {
		return {
			// basicData,
			showPicker: false,
			selectField: [],
			selected: {}
		}
	},
	components: {
		houseBasicInfo,
		searchHouse,
		inputList
	},
	created() {
		console.log(this.$route.query)
	},
	mounted(){
		
	},
	methods: {
		onConfirm(value) {
			this.value = value;
			this.showPicker = false;
		},
		handlePopup(item) {
			this.showPicker = true
			this.selectField = cloneDeep(item.field)
			this.selected = item
		},
		popupChange(picker, value, index) {
			let alias = typeof value === 'string' ?  value  : value.join(' / ')
			this.selectField.forEach((item, index) => {
				item.value = alias
			})
		},
		hidePopup(id, item) {
			console.log(id)
			console.log(item)
			
		}
	}
}
</script>

<style lang="less" scoped>

#addHouse {
	height: 100%;
	width: 100%;
	// padding: 0 20px;
}

.moveR-enter-active,  .moveR-leave-active {
	transition: all .2s linear;
	transform: translateX(0);
}
.moveR-enter,  .moveR-leave {
	transform: translateX(100%);
}
.moveR-leave-to{
	transform: translateX(100%);
}


.moveL-enter-active,
.moveL-leave-active {
	transition: all 0.3s linear;
	transform: translateX(0%);
}
.moveL-enter,
.moveL-leave {
	transform: translateX(-100%);
}
.moveL-leave-to {
	transform: translateX(-100%);
}

/deep/ .van-hairline--top-bottom::after {
	border-color: #D2D8DD;
}
</style>

